<template>
  <div class="rank-item">
    <div class="rank-item_li" v-for="(item,index) in widget" :key="index" v-show="$api.role(item.link.url)">
      <div class="rank-item_li-box" @click="$router.push(item.link.url)">
        <div class="rank-item_li-left" :style="`border: 2px solid ${item.bgColor};`">
          <i class="icon iconfont " :class="`${item.icon.name}`" :style="`color: ${item.bgColor};font-size: 32px;`"></i>
        </div>
        <div class="rank-item_li-right">
          <div class="rank-item_name">{{item.link.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    props: {
      widget: {}
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "./styles.scss";
</style>
